<template>
  <el-dialog
    title="数据导入"
    :visible.sync="visible"
    width="30%"
  >
    <el-form ref="form" :model="form" v-loading="loading">
      <div>
        <el-form-item label="模板下载">
          <el-button type="success" plain @click="downTemp">点击下载</el-button>
        </el-form-item>
        <el-form-item label="数据导入">
          <el-upload
            :headers="headers"
            :action="action"
            :data="data"
            :on-success="uploadSuccess"
            :on-progress="uploadProgress"
            :show-file-list="false"
            accept=".xls,.xlsx"
          >
            <el-button type="primary" plain>点击导入</el-button>
          </el-upload>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
      </span>
  </el-dialog>
</template>

<script>
import {getToken} from '@/utils/auth'
import {Loading} from 'element-ui'

export default {
  data() {
    return {
      errorShow: false,
      errorForm: {},
      tabIndex: 0,
      visible: false,
      loading: false,
      downloadLoadingInstance: null,
      form: {},
      data: {},
      headers: {
        Authorization: getToken()
      },
      action: process.env.VUE_APP_BASE_API + '/ims/product/importData'
    }
  },
  methods: {
    show(tabIndex,) {
      this.visible = true
      this.tabIndex = tabIndex
    },
    downTemp() {
      this.download('/ims/product/exportTemplate', {}, '商品导入模版' + '.xlsx')
    },
    uploadProgress() {
      this.downloadLoadingInstance = Loading.service({
        text: '正在导入数据，请稍候', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    uploadSuccess(res) {
      this.downloadLoadingInstance.close()
      if (res.code == 200) {
        this.$emit('ok')
        this.visible = false
        this.$message.success('导入成功')
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>
